<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="商品名称">
      <el-input v-model="form.name"/>
    </el-form-item>
    <el-form-item label="类别">
      <el-input v-model="form.type"/>
    </el-form-item>
    <el-form-item label="价格">
      <el-input v-model.number="form.price"/>
    </el-form-item>
    <el-form-item label="描述">
      <el-input v-model="form.description" type="textarea"/>
    </el-form-item>
    <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleChange" ref="upload"
               :on-remove="handleRemove"
               :limit="1" :class="{ disabled: uploadDisabled }">
      <el-icon>
        <Plus/>
      </el-icon>

      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
          <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
          >
            <el-icon><Download/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
        </div>
      </template>
    </el-upload>
    <!--    <el-form-item label="商品图片">-->
    <!--      <el-upload-->
    <!--          class="avatar-uploader"-->
    <!--          action=""-->
    <!--          :show-file-list="false"-->
    <!--          :on-success="handleAvatarSuccess"-->
    <!--          :before-upload="beforeAvatarUpload"-->
    <!--      >-->
    <!--        <img v-if="imageUrl" :src="imageUrl" class="avatar" />-->
    <!--        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
    <!--      </el-upload>-->
    <!--    </el-form-item>-->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">发布</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {Plus} from '@element-plus/icons-vue'

export default {
  name: "publishGoods",
  components: {
    Plus,
  },
  data() {
    return {
      uploadDisabled: false,
      imageUrl: '',
      form: {
        name: '',
        type: '',
        price: '',
        description: '',
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleChange(file, fileList) {
      alert(fileList.length);
      if (fileList.length >= 1) {
        this.uploadDisabled = true;
      }
    },
    handleRemove() {
      //imgDelete.post({pic_name : file.response.pic_name}).then();
      this.uploadDisabled = false;
    }
  }
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.disabled .el-upload--picture-card {
  display: none !important;
}
</style>
